

.SliderMicro {
  background-color: var(--fg-color);
  --label-color: var(--text-color);
  --reset-color: var(--icon-color);
  --font-weight: 400;
  --opacity: 0.5;

  &.highlight {
    --label-color: var(--header-icon-active-color);
    --reset-color: var(--header-icon-active-color);
    --font-weight: 600;
    --opacity: 1;
  }


  
  display: grid;
  grid-template-columns: 1fr max-content;
  grid-column-gap: 5px;
  margin-bottom: 2px;
  align-items: center;

  &.withInput {
    grid-template-columns: 1fr 60px max-content;
  }

  &.withLabel {
    grid-template-columns: 80px 1fr max-content;
  }

  &.withLabel.withInput {
    grid-template-columns: 80px 1fr 60px max-content;
  }

  & > input[type="range"] {
    width: 100%;
  }
}